<template>
    <div class="view">
        <android-nav-bar title="情感空间" v-on:back="back"></android-nav-bar>
        <div class="articles-box">
            <div class="none-articles" v-if="!total">
                暂无情感发文!
            </div>
            <cube-scroll class="scroll" ref="scroll" :scroll-events="['scroll']"
                         :data="articles"
                         :options="options"
                         @pulling-down="onPullingDown"
                         @pulling-up="onPullingUp"
                         v-if="total">
                <div class="article flex" v-for="item in articles" @click="toPage('articleDetail',{id:item.id})">
                    <div class="content-box">
                        <div class="title">
                            {{item.title}},{{item.remark}}
                        </div>
                        <div class="other-box">
                            <span class="writer">
                                作者:{{item.writer}}
                            </span>
                            <span class="time rt">{{new Date(item.create_time*1000).getFullYear()}}-{{(new Date(item.create_time*1000).getMonth()+1)<10?'0'+(new Date(item.create_time*1000).getMonth()+1):(new Date(item.create_time*1000).getMonth()+1)}}-{{new Date(item.create_time*1000).getDate()<10?'0'+new Date(item.create_time*1000).getDate():new Date(item.create_time*1000).getDate()}}</span>
                        </div>
                    </div>
                    <div class="img-box">
                        <img :src="item.image_id?item.image.file_path+'?imageView2/0/w/150':`${publicPath}img/base/love-img.jpg`">
                    </div>

                </div>
            </cube-scroll>
        </div>

    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class LoveArticle extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private articles: any[] = [];
        private total: number = 0;
        private page: number = 1;
        @State("UserStore")
        public user!: InterfaceUser;

        private get options(): any {
            return {
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "上滑加载更多", noMore: "没有更多数据了..."},
                    visible: true
                },
                scrollbar: true
            };
        }

        private onPullingDown(): void {
            (this as any).$refs.scroll.forceUpdate();
        }

        private onPullingUp(): void {
            Http.get(this.api.getEmotionArticle, {page: this.page, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        this.articles = this.articles.concat(res.data.data);
                        this.$nextTick(() => {
                            (this as any).$refs.scroll.refresh();
                            (this as any).$refs.scroll.forceUpdate();
                        });
                        this.page++;
                    } else if (res.data.data == []) {
                        (this as any).$refs.scroll.forceUpdate();
                    }
                }
            });
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private getArticles(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            Http.get(this.api.getEmotionArticle, {page: this.page, size: 15}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    this.page++;
                    this.articles = res.data.data;
                    this.total = res.data.total;
                    console.log(res);
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private mounted(): void {
            this.getArticles();
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        overflow hidden;
        background $theme-page-common-background-color;

        .articles-box
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));

            &::before
                display table;
                content '';

            .none-articles
                height 100px;
                line-height 100px;
                text-align center;
                color $theme-viceColor-font;

            .scroll
                background-color #fff;
                height calc(100vh - var(--safe-area-inset-top) - 47px);

                .article
                    padding 10px;
                    border-bottom 1px solid $theme-line-color;
                    justify-content: space-between;

                    .content-box
                        width calc(100vw - 20px - 120px - 15px);

                        .title
                            height 60px;
                            line-height 20px;
                            font-size 16px;
                            font-weight 600;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            overflow hidden;
                            margin-bottom calc(100px - 60px - 20px);

                        .other-box
                            .time
                                color $theme-viceColor-font;

                    .img-box
                        width 120px;
                        height 100px;

                        img
                            width 100%;
                            height 100%;
                            border-radius 8px;


</style>
